<template>
	<view>
		<ttBar title="申请请假" leftIcon="icon-back"></ttBar>
		<view class="selectCnt">
			<view class="row">
				<text class="label">学员</text>
				<text class="value" @tap="showMember">{{selectMemberName}}</text>
				<text class="iconfont icon-right" @tap="showMember"></text>
			</view>
			<view class="row">
				<text class="label">课程</text>
				<text class="value" @tap="showClass">{{selectClassName}}</text>
				<text class="iconfont icon-right" @tap="showClass"></text>
			</view>
			<view class="row">
				<text class="label">开始日期</text>
				<text class="value" @tap="showStart">{{ startDate }}</text>
				<text class="iconfont icon-right" @tap="showStart"></text>
			</view>
			<view class="row">
				<text class="label">结束日期</text>
				<text class="value" @tap="showEnd">{{ endDate }}</text>
				<text class="iconfont icon-right" @tap="showEnd"></text>
			</view>
			<view class="row">
				<text class="label timeLabel">请假时段</text>
				<text @tap="showSTime">{{sTime}}</text>
				<text class="timeBreak">——</text>
				<text class="" @tap="showETime">{{eTime}}</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		<view class="reasonBox">
			<text class="title">请假原因</text>
			<textarea placeholder="请输入请假原因" maxlength="50" v-model="memo"></textarea>
		</view>
		<button class="btn" @tap="postData">申请提交</button>
		<w-picker mode="selector" @confirm="cmfMember" ref="member" themeColor="#f00" :selectList="memberList"></w-picker>
		<w-picker mode="selector" @confirm="cmfClass" ref="class" themeColor="#f00" :selectList="classList"></w-picker>

		<w-picker mode="date" :current="true" :startYear="year" :defaultVal="[year, month, date]" @confirm="cmfStart" ref="start" themeColor="#f00"></w-picker>
		<w-picker mode="date" :current="true" :startYear="year" :defaultVal="[year, month, date]" @confirm="cmfEnd" ref="end" themeColor="#f00"></w-picker>

		<w-picker mode="time" @confirm="cmfSTime" ref="stime" themeColor="#f00"></w-picker>
		<w-picker mode="time" @confirm="cmfETime" ref="etime" themeColor="#f00"></w-picker>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
import TL from '../../common/tool.js';
import wPicker from '../../components/w-picker/w-picker.vue';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin
		})
	},
	components: {
		wPicker
	},
	data() {
		return {
			dateNow:'',
			year: '2020',
			month: '01',
			date: '01',
			startDate: '',
			endDate: '',
			sTime:'开始时间',
			eTime:'结束时间',
			selectMember: '',
			selectMemberName:'请选择',
			memberList: [],
			selectClass:'',
			selectClassName:'请选择',
			classList: [],
			memo:''
		};
	},
	watch: {},
	methods: {
		showMember() {
			this.$refs.member.show();
		},
		showStart() {
			this.$refs.start.show();
		},
		showEnd() {
			this.$refs.end.show();
		},
		showClass() {
			if(this.selectMemberName=='请选择'){
				uni.showToast({
					title: '请先选择学员',
					icon: 'none'
				});
			}else{
				this.$refs.class.show();
			}
		},
		showSTime() {
			this.$refs.stime.show();
		},
		showETime() {
			this.$refs.etime.show();
		},
		cmfMember(e) {
			this.selectMember=e.checkArr.value;
			this.selectMemberName=e.checkArr.label;
			this.classList=[];
			this.selectClass='';
			this.selectClassName='请选择';
			this.getClass();
		},
		cmfClass(e) {
			this.selectClass=e.checkArr.value;
			this.selectClassName=e.checkArr.label;
		},
		cmfStart(e) {
			let _sdate=TL.dateStrToNum(e.result);
			let _ndate=TL.dateStrToNum(this.dateNow);
			let _edate=TL.dateStrToNum(this.endDate);
			if(_sdate<_ndate){
				uni.showToast({
					title: '只能选择今天之后的日期',
					icon: 'none'
				});
			}else{
				if(_edate<_sdate){
					uni.showToast({
						title: '开始日期不能大于结束日期',
						icon: 'none'
					});
				}else{
					this.startDate=e.result;
				}
			}
			
		},
		cmfEnd(e) {
			let _sdate=TL.dateStrToNum(this.startDate);
			let _edate=TL.dateStrToNum(e.result);
			if(_edate<_sdate){
				uni.showToast({
					title: '结束日期不能小于开始日期',
					icon: 'none'
				});
			}else{
				this.endDate=e.result;
			}
		},
		cmfSTime(e) {
			if(this.eTime!='结束时间'){
				let _stm=parseInt(e.checkArr[0].toString()+e.checkArr[1].toString())
				let _etm=parseInt(this.eTime.replace(':',''))
				if(_stm>=_etm){
					uni.showToast({
						title: '结束时间不能小于开始时间',
						icon: 'none'
					});
				}else{
					this.sTime=e.result.substr(0,5);
				}
			}else{
				this.sTime=e.result.substr(0,5);
			}

		},
		cmfETime(e){
			if(this.sTime!='开始时间'){
				let _etm=parseInt(e.checkArr[0].toString()+e.checkArr[1].toString())
				let _stm=parseInt(this.sTime.replace(':',''))
				if(_stm>=_etm){
					uni.showToast({
						title: '结束时间不能小于开始时间',
						icon: 'none'
					});
				}else{
					this.eTime=e.result.substr(0,5);
				}
			}else{
				this.eTime=e.result.substr(0,5);
			}
		},
		getMemberList() {
			this.$store
				.dispatch('apiGetMemberList', {
					userId: this.userInfo.userId,
					page_no: 1,
					page_size: 10
				})
				.then(res => {
					res.data.data.items.forEach((x,i)=>{
						let _m={
							label:x.name,
							value:x.id.toString()
						}
						this.memberList[i]=_m;
						this.$refs.member.initData()
					})
				});
		},
		getClass(){
			let _data={
				userId:this.userInfo.userId
			}
			if(this.selectMember){	//有选择学员
				_data.memberId=this.selectMember
			}
			this.$store.dispatch("apiGetMemberClass",_data).then(res=>{
				res.data.data.forEach((x,i)=>{
					let _m={
						label:x.name,
						value:x.order_id
					}
					this.classList[i]=_m
					this.$refs.class.initData();
				})
			})
		},
		postData(){
			if(!this.selectClass){
				uni.showToast({
					title: '请选择要请假的课程',
					icon: 'none'
				});
			}else if(this.sTime=='开始时间'){
				uni.showToast({
					title: '请选择开始时间',
					icon: 'none'
				});
			}else if(this.eTime=='结束时间'){
				uni.showToast({
					title: '请选择结束时间',
					icon: 'none'
				});
			}else{
				let _obj={
					orderId:this.selectClass,
					begin:this.startDate,
					end:this.endDate,
					time:this.sTime+'-'+this.eTime
				}
				if(this.memo){
					_obj.memo=this.memo
				}
				this.$store.dispatch("apiApplyLeave",_obj).then(res=>{
					console.log(res);
					if(res.data.code==1){
						uni.showToast({
							title: '请假申请提交成功',
							icon: 'none'
						});
						uni.$emit("shuaxin");
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
			}
		}
	},
	onLoad() {
		this.year = TL.datePattern(new Date(), 'yyyy');
		this.month = TL.datePattern(new Date(), 'MM');
		this.date = TL.datePattern(new Date(), 'dd');
		this.startDate = TL.datePattern(new Date(), 'yyyy-MM-dd');
		this.endDate = TL.datePattern(new Date(), 'yyyy-MM-dd');
		this.dateNow=TL.datePattern(new Date(), 'yyyy-MM-dd');
		this.getMemberList();
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}
.btn {
	margin: 50upx 80upx 0 80upx;
	height: 90upx;
	background: #ffb423;
	border-radius: 45upx;
	color: #ffffff;
	font-size: 32upx;
	line-height: 90upx;
}
.reasonBox {
	background-color: #ffffff;
	margin-top: 20upx;
	padding: 0 60upx;
	display: flex;
	flex-direction: column;
	.title {
		margin-top: 30upx;
		font-size: 32upx;
	}
	textarea {
		font-size: 32upx;
		height: 350upx;
		margin-top: 10upx;
		width: 100%;
	}
}
.selectCnt {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #efefef;
	background-color: #ffffff;
	.row {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 60upx;
		height: 90upx;
		border-bottom: 1px solid #efefef;
		font-size: 32upx;
		color: #202932;
		.timeLabel {
			flex-grow: 1;
		}
		.timeBreak {
			margin: 0 10upx;
		}
		.value {
			flex-grow: 1;
			text-align: right;
		}
		.iconfont {
			color: #d3d3d3;
			margin-left: 10upx;
		}
	}
}
</style>
